<template>
	<view class="top">
		<!-- 顶部蓝色背景 -->
		<view class="CM-top"></view>
		<!-- 地图框的白边 -->
		<view class="ditubaibian">
			<!-- 地图 -->
			<view class="ditu">
				<map :latitude="latitude" :longitude="longitude" scale="14"></map>
			</view>
		</view>
		<!-- 底部区域 -->
		<view class="CM-bottom">
			<view class="CM-bottom-text">
				<view @click="ToWStoreDetails">
					<text class="CM-bottom-text-one-left">
						556m
					</text>
					<view class="CM-bottom-text-one">车百事汽车生活馆</view>
					<!-- 图片 -->
					<img class="picture" src="/static/CarMaintenance/beijing.jpg" />
					<view class="CM-bottom-text-two">
						<uni-rate class="star" size="18" :readonly="true" :value="storeScore" />
						<view class="score">4分</view>
					</view>
					<view class="CM-bottom-text-three">
						营业时间: 周一至周五 早上8:00-晚上22:00
					</view>
					<view class="CM-bottom-text-three">
						位置:山阳区人民路与解放路交叉口
					</view>
				</view>
				<view class="CM-bottom-button">
					<view @click="openModal"><!-- 点击事件,点击弹出商家电话 -->
						<img class="blue" src="/static/CarMaintenance/按钮蓝色背景.png" />
						<view class="phone">
							<img src="/static/CarMaintenance/电话.png" alt="" />
							<view>联系门店</view>
						</view>
					</view>
					<view>
						<img class="red" src="/static/CarMaintenance/按钮橙色背景.png" />
						<view class="time">
							<img src="/static/CarMaintenance/预约.png" alt="" />
							<view>立即预定</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view v-if="showModal" class="overlay"></view> <!-- 添加遮罩层 -->
		<!-- 弹出框 -->
		<view v-if="showModal" class="modal">
			<view class="modal-content">
				<view class="modal-button" @click="callStore">拨打电话</view>
				<view class="modal-button" @click="copyPhoneNumber">复制电话</view>
				<view class="modal-button" @click="closeModal">取消拨号</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeScore: 4, //橙色星星数量
				showModal: false, // 控制弹出框显示
				phoneNumber: '123456789', // 商家电话
				//维度
				latitude: "",
				//经度
				longitude: ""
			}
		},
		methods: {
			callStore() {
				// 拨打电话的逻辑
				this.showModal = false; // 关闭弹出框
			},
			copyPhoneNumber() {
				// 复制电话的逻辑
				this.showModal = false; // 关闭弹出框
			},
			closeModal() {
				this.showModal = false; // 关闭弹出框
			},
			openModal() {
				this.showModal = true; // 打开弹出框
			},
			// 跳转商家详情
			ToWStoreDetails() {
				uni.navigateTo({
					url: '/pages/CarMaintenance/WStoreDetails/WStoreDetails'
				})
			},
			//地图的方法
			getMyPosition() {
				const that = this;
				uni.getLocation({
					success(resp) {
						console.log(resp);
						that.latitude = resp.latitude
						that.longitude = resp.longitude
					}
				})
			}
		},
		onReady() {
			this.getMyPosition()
		},
	}
</script>

<style>
	.top {}

	.CM-top {
		width: 750rpx;
		height: 350rpx;
		background-color: #3385FD;
		position: fixed;
	}

	.ditubaibian {
		width: 690rpx;
		height: 900rpx;
		background-color: #ffffff;
		position: relative;
		top: 10rpx;
		margin: 0 auto;
		border-radius: 10px;
	}

	.ditu {
		width: 650rpx;
		height: 840rpx;
		/* background-color: #ffff00; */
		position: relative;
		top: 30rpx;
		border-radius: 10rpx;
		margin: auto;
	}

	.CM-bottom {
		background-color: #ffffff;
		width: 750rpx;
		position: absolute;
		height: 350rpx;
	}

	.CM-bottom-text {
		width: 650rpx;
		height: 220rpx;
		background-color: #ffffff;
		position: relative;
		margin: auto;
	}

	.CM-bottom-text-one {
		font-weight: 900;
		font-size: 18px;
		padding: 8rpx 0;
	}

	.CM-bottom-text-one-left {
		float: right;
		color: #3385FD;
		font-weight: 700;
		padding-top: 8rpx;
	}

	.star {
		float: left;
	}

	.picture {
		width: 300rpx;
		height: 180rpx;
		float: right;
	}

	.score {
		font-weight: 700;
		margin: 15rpx 0 0 15rpx;
	}

	.CM-bottom-text-three {
		font-size: 24rpx;
		font-weight: 600;
		padding: 15rpx 0 0 0;
	}

	.CM-bottom-button {
		position: relative;
	}

	.blue {
		width: 300rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		top: 80rpx;
	}

	.red {
		width: 300rpx;
		height: 80rpx;
		position: absolute;
		right: 0;
		top: 80rpx;
	}

	.phone {
		position: absolute;
		left: 70rpx;
		top: 105rpx;
		width: 150rpx;
	}

	.phone img {
		height: 30rpx;
		width: 30rpx;
		position: absolute;
	}

	.phone view {
		font-size: 14px;
		color: #ffffff;
		line-height: 27rpx;
		position: absolute;
		left: 40rpx;
	}

	.time {
		width: 150rpx;
		position: absolute;
		right: 60rpx;
		top: 106rpx;
	}

	.time img {
		height: 30rpx;
		width: 30rpx;
		position: absolute;
		right: 150rpx;
	}

	.time view {
		font-size: 14px;
		color: #ffffff;
		line-height: 27rpx;
		position: absolute;
		right: 27rpx;
	}

	/* 遮罩层样式 */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		/* 设置透明度为60% */
		z-index: 999;
		/* 确保遮罩层在最上层 */
	}

	/* 弹出框样式 */
	.modal {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 1);
		/* 白色背景 */
		z-index: 1000;
		/* 确保弹出框在遮罩层之上 */
	}

	.modal-content {
		padding: 0px;
	}

	.modal-button {
		padding: 15px 0;
		text-align: center;
		border-bottom: #dfdfdf solid 1rpx;
	}
	/* 地图的样式 */
	.ditu>map {
		width: 100%;
		height: 100%;
	}
</style>